<template>
	<div class="lang-wrap">
		<select class="form-select" v-model="lang">
			<option v-for="item in langs" :value="item.id">
				{{ item.name }}
			</option>
		</select>
	</div>

	<div class="content-wrap">
		<textarea class="form-control content" rows="20" cols="100" v-model="content"
			placeholder="Please input your source code."></textarea>
	</div>

	<div class="func-btn-group">
		<button class="btn btn-success" @click="paste">
			{{ $t('paste') }}
		</button>
	</div>
</template>


<script type="module">
import { PasteService } from '@/common/common.object';

const showPage = id => '/paste/' + id;

export default {
	data() {
		return {
			lang: null,
			langs: [],

			content: "",
		};
	},
	created() {
		PasteService.getSupportLang().then(result => {
			if (!result || !result.length) {
				return;
			}

			this.lang = result[0].id;
			this.langs = Object.freeze(result);
		});
	},
	methods: {
		paste() {
			let lang = this.lang;
			let content = this.content;

			if ((!lang && lang != 0) || !content) {
				return;
			}


			PasteService.submit(lang, content).then(result => {
				let id = result;

				this.$toPage(showPage(id), false);
			});
		},
	}
}

</script>


<style scoped>
@import '@/assets/paste.css';
</style>
